<template>
	<div>
		<uni-notice-bar text="实例: 张三三,138xxxxxxxx,广东省深圳市南山区xx路xx号" color="#2979FF" background-color="#EAF2FF" />
		<view style="background-color: white;border-radius: 12px;padding: 10px;min-height: 130px;">
			<uni-easyinput type="textarea" v-model="allAddress" placeholder="粘贴信息,自动划分姓名/电话和地址"
				style="background-color: white;" :inputBorder="false" />
			<button hover-class="buttonHover" @click="parseAddress"
				style="background-color: rgb(250,74,55,0.9);color: white;width: 80px;height: 30px;font-size: 13px;display: flex;justify-content: center;align-items: center;border-radius: 20px;float: right;">识别</button>
			<button hover-class="buttonHover" @click="paste"
				style="background-color: #8f939c;color: white;width: 80px;height: 30px;font-size: 13px;display: flex;justify-content: center;align-items: center;border-radius: 20px;float: right;margin-right: 10px;">粘贴</button>
			
		</view>
		<view style="background-color: white;border-radius: 12px;margin-top: 10px;padding: 15px;">
			<view style="font-size: 17px;font-weight: bold;margin-bottom: 15px;">联系人信息</view>
			<uni-forms ref="form" :modelValue="formData" :rules="rules" labelWidth="75px">
				<uni-forms-item label="真实姓名" name="contactName">
					<uni-easyinput type="text" v-model="formData.contactName" placeholder="请输入真实姓名" />
				</uni-forms-item>
				<uni-forms-item label="电话" name="phone">
					<uni-easyinput type="number" v-model="formData.phone" placeholder="请输入电话"/>	
				</uni-forms-item>
				<uni-forms-item label="省市区" name="bookDistrict">
					<uni-data-picker ref="dataPicker" @change="onchange"  preload="true" step-searh="true" placeholder="请选择地址" popup-title="请选择所在地区" :localdata="bookDistrict"
						style="background-color: white;" v-model="formData.bookDistrict">
					</uni-data-picker>
					<view style="margin-top: 20px;">
						<uni-easyinput  type="textarea" v-model="formData.bookAddress"
							suffixIcon="location-filled" @iconClick="locationAddressDetail"
							placeholder="详细地址(例如**街**号**)" />
					</view>
				</uni-forms-item>
				<view @click="clearAllAddress" hover-class="buttonHover" style="text-align: end;">清空</view>

			</uni-forms>
			
		</view>
		<button hover-class="buttonHover" type="primary" @click="submit()"
			style="color:#ffffff;background-color:#bf5f09;width: 100px;font-size: 15px;margin-top:50px;margin-bottom: 50px;">保存</button>
	</div>
</template>

<script>
	import AddressParse from 'address-parse';
	import {getCustomerAddressDetails} from '@/api/system/customer.js'
	import {getDistrict,getAllAddressTree} from '@/api/system/dict.js'
	export default {
		data() {
			return {
				allAddress: "",
				formData: {
					contactName: '',
					phone: '',
					bookDistrict: '',
					bookAddress: '',
					bookDistrictName:'',
					bookLat:'',
					bookLng:'',
					customerId:'',
					id:''
				},
				// 校验规则
				rules: {
					contactName: {
						rules: [{
								required: true,
								errorMessage: '请输入真实姓名',
							}
						]
					},
					phone: {
						rules: [{
							required: true,
							errorMessage: '请输入电话',
						},
						{
						    pattern: '^(13[0-9]|14[01456879]|15[0-35-9]|16[2567]|17[0-8]|18[0-9]|19[0-35-9])\\d{8}$',
						    errorMessage: '电话格式不正确'
						}
						]
					},
					bookDistrict: {
						rules: [{
							required: true,
							errorMessage: '请选择地址',
						}]
					},
					bookAddress: {
						rules: [{
							required: true,
							errorMessage: '请填写详细地址',
						}]
					}
				},
				//地区下拉框
				bookDistrict: [],
				//记录编辑的下标
				index:''
			}
		},
		onLoad(e) {
			if(e.addressDetails&&e.index)
			{
				//设置顶部导航栏标题
				uni.setNavigationBarTitle({
					title: '编辑地址'
				})
				this.index=e.index
				this.formData=JSON.parse(e.addressDetails)
			}

		},
		created() {
			//获取全国地址信息
			getAllAddressTree().then(res=>{
				this.bookDistrict=res.data
			})
		},
		methods: {
			//粘贴
			paste() {
				var that = this
				this.allAddress = ""
				//粘贴
				uni.getClipboardData({
					showToast: false,
					success: function(res) {
						that.allAddress = res.data
						uni.showToast({
							title: '粘贴成功',
							duration: 2000
						})
					},
					fail(err) {
						console.log(err)
					}

				});
			},
			parseAddress() { //地址解析
				/*判断解析的地址内容不为空*/
				if (this.allAddress != '') {
					const result = AddressParse.parse(this.allAddress);
					this.formData.contactName = result[0].name;
					this.formData.phone = result[0].mobile;
					//为了能让这个多选框回显，这个address值为当前地址“省市区”中最后的区
					this.formData.bookDistrict = `${result[0].code}`
					// ${result[0].province}${result[0].city}
					this.formData.bookAddress = result[0].details;
				} else {
					
					uni.showToast({
						icon: 'none',
						title: '请输入您要解析的地址信息'
					})
				}

			},
			//定位详细地址
			locationAddressDetail() {
				var that = this
				uni.chooseLocation({
					success: function (res) {
						that.formData.bookLat=`${res.latitude}`
						that.formData.bookLng=`${res.longitude}`
						//that.formData.bookDistrict = `${res.address}`
						that.formData.bookAddress = `${res.address}`
						uni.showToast({
							icon: 'success',
							title: `已获取到当前经度：${res.longitude},纬度：${res.latitude}`
						})
						console.log('位置名称：' + res.name);
						console.log('详细地址：' + res.address);
						console.log('纬度：' + res.latitude);
						console.log('经度：' + res.longitude);
					}
				});
			},
			//清空所有地址文本
			clearAllAddress() {
				this.allAddress = ""
				this.formData = {
					contactName: '',
					phone: '',
					bookDistrict: '',
					bookAddress: '',
				}

				uni.showToast({
					icon: 'none',
					title: '清除成功!'
				})
			},
			//保存地址
			submit(){
				this.$refs.form.validate().then(res=>{
					let pages = getCurrentPages(); // 获取当前页面栈的实例，以数组形式按栈的顺序给出，第一个元素为首页，最后一个元素为当前页面。
					let nowPage = pages[pages.length - 1]; //当前页页面实例
					let prevPage = pages[pages.length - 2]; //上一页页面实例
					prevPage.$vm.otherFun(this.formData,this.index)// 給上一頁綁定方法otherFun,傳參formData
					uni.navigateBack({
					    delta:1 // 可以不傳delta值，默認為1
					})
					
				}).catch(err =>{
					uni.showToast({
						title: err[0].errorMessage,
						icon:'none'
					})
				})
			},
			onchange(e){
				this.formData.bookDistrictName=e.detail.value[0].text+e.detail.value[1].text+e.detail.value[2].text
			}

		},
	}
</script>

<style scoped>
	::v-deep uni-checkbox .uni-checkbox-input {
		border-radius: 50%;
	}

	.buttonHover {
		opacity: 0.6;
	}

</style>